<template>
  <div>
    <!-- 弹出层 -->
    <van-dialog v-model="show" :showConfirmButton="false">
      <div class="dialog-content">
        <div class="dialog-title">请输入退回原因</div>
        <div class="dialog-content-radio">
          <van-field
            v-model="Remarks"
            rows="3"
            autosize
            type="textarea"
            border
          />
        </div>
        <div class="dialog-bottom">
          <div></div>
          <div>
            <span @click="close">取消</span>
            <span class="complete-btn" @click="confirm">确定</span>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { BackHiddenDanger } from "@/api/sytech/sytechDangerCheckTaskDetail";
export default {
  props: {
    show: {
      type: Boolean,
      required: false,
    },
    id: {},
  },
  data() {
    return {
      Remarks: "",
    };
  },
  methods: {
    confirm() {
      if (this.Remarks) {
        const data = {
          ID: this.id,
          Remarks: this.Remarks,
        };
        BackHiddenDanger(data).then((res) => {
          this.$emit("cb", true);
        });
      }
	  else{
		  this.$toast("请输入退回原因");
	  }
    },
    close() {
      this.$emit("cb");
    },
  },
};
</script>

<style lang="less" scoped>
// 弹框
.dialog-content {
  position: relative;
  padding: 40px 0;

  .dialog-title,
  .dialog-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    font-size: 14px;
    background-color: #fff;
  }
  .dialog-title {
    top: 0;
  }
  .dialog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #666;
    }
    .complete-btn {
      color: rgb(0, 141, 101);
      margin-left: 20px;
    }
  }
  .dialog-content-radio {
    padding: 0 15px;
  }
}
</style>